<template>
   <os-table autoHeight stripe action="system/dictItemPage" :columns="columns" :form="form" ref='osTable' :btn="btn" size="small" :otherSearch="{dictItemCode}" border></os-table>
</template>

<script>
export default {
  name: 'DictItemInfo',
  data () {
    return {
      form: {
        rule: [
          { type: 'Input', title: '字典项名称', field: 'itemText' },
          { type: 'Input', title: '字典项值', field: 'itemValue' },
          { type: 'el-button', field: 'search', props: { type: 'primary' }, children: ['查询'], emit: ['click'] },
          { type: 'el-button', field: 'clear', props: { type: 'primary' }, children: ['清空'], emit: ['click'] }
        ]
      },
      btn: [
        { text: '新增', cb: cb => this.onAdd() }
      ],
      columns: [
        // {label: 'id', prop: 'id'},
        { label: '字典编码', prop: 'dictItemCode' },
        { label: '字典项名称', prop: 'itemText' },
        { label: '字典项值', prop: 'itemValue' },
        { label: '描述', prop: 'description' },
        { label: '排序号', prop: 'sortNo' },
        {
          label: '操作',
          prop: 'action',
          renderCell: (data) => (
            <div>
              <el-button
                type="text"
                size="mini"
                onClick={() => this.onEdit(data)}
              >
                编辑
              </el-button>
              <el-button
                type="text"
                size="mini"
                onClick={() => this.onDel(data)}
              >
                删除
              </el-button>
            </div>
          )
        }
      ],
      fApi: null,
      ruleSetItem: [
        { type: 'Input', title: '字典编码', field: 'dictItemCode' },
        { type: 'Input', title: '字典项值', field: 'itemValue', validate: [this.$v.required()] },
        { type: 'Input', title: '字典项名称', field: 'itemText', validate: [this.$v.required()] },
        {
          type: 'InputNumber',
          title: '排序号',
          field: 'sortNo',
          value: 0,
          col: { span: 12 },
          validate: [this.$v.inputNumber()],
          props: {
            min: 0,
            max: 99,
            placeholder: '0~99,数值越小越靠前'
          }
        },
        { type: 'div', children: ['0~99，取值越小越靠前'], col: { span: 12 }, class: 'm-l-10 c-f00' },
        { type: 'Input', title: '描述', field: 'description' }
      ],
      optionSetItem: {
        ...this.$utils.formOptions(100, 24)
      }
    }
  },
  computed: {
    dictItemCode () {
      // const itemCode = this.$attrs?.query?.itemCode
      const dictItemCode = this.$route.query.dictItemCode
      console.info('-------------itemCode: ' + dictItemCode)
      return dictItemCode
    }
  },
  watch: {
    dictItemCode: {
      handler (val) {
        this.$nextTick(() => {
          this.$refs.osTable.getData()
        })
      },
      immediate: true
    }
  },
  methods: {
    onAdd (row = null) {
      // console.log(row)
      const btn = [{ text: '保存', loading: true, cb: cb => this.save(cb, row) }]
      const o = { }
      for (const item of this.ruleSetItem) {
        o[item.field] = null
      }
      this.$utils.dialog(`${row ? '编辑' : '添加'}字典`, <form-create vModel={this.fApi} rule={this.ruleSetItem} option={this.optionSetItem}/>,
        { width: '600px', btn })
      this.$nextTick(() => {
        this.fApi.updateRule('itemValue', {
          props: {
            disabled: !!row
          }
        })
        if (!row) {
          this.fApi.setValue(o)
          this.fApi.coverValue({ dictItemCode: this.dictItemCode }) // 设置值
          return
        }
        this.fApi.disabled(true, 'dictItemCode')
        this.fApi.setValue(row)
      })
    },
    save (cb, row) {
      this.fApi.validate(async (valid) => {
        cb()
        if (valid) {
          const formData = this.fApi.formData()
          formData.id = row?.id
          formData.dictItemCode = this.dictItemCode
          const action = row ? 'system/dictItemUpdate' : 'system/dictItemInsert'
          const { error } = await this.$store.dispatch(action, formData)
          if (!error) {
            this.$utils.message.success('保存成功')
            this.fApi.resetFields()
            this.$utils.hideDialog()
            this.$refs.osTable.getData()
          }
        }
      })
    },
    onEdit ({ row }) {
      this.onAdd(row)
    },
    async onDel ({ row }) {
      const re = await this.$utils.confirm('确定要删除吗？')
      if (!re) return
      const { error } = await this.$store.dispatch('system/dictItemDelete', row.id)
      if (!error) {
        this.$utils.message.success('删除成功')
        this.$refs.osTable.getData()
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
